<template>
  <div class="app-container">
    <a-card size="small" :bordered="false" class="box-card">
      <a-tabs
        v-model:activeKey="activeKey"
        animated
        @change="handleTabChange"
        class="user"
      >
        <a-tab-pane key="1">
          <template #tab>
            <span>
              <UserOutlined />
              用户反馈
            </span>
          </template>
          <a-card size="small" :bordered="false" class="box-card marginTop12">
            <template #title>
              <header class="titleHeader">
                <div class="titleLeft">
                  反馈列表
                  <ExclamationCircleOutlined />
                </div>
              </header>
            </template>
            <FeedbackLlist />
          </a-card>
        </a-tab-pane>
        <a-tab-pane key="2">
          <template #tab>
            <span>
              <MailOutlined />
              我的反馈
            </span>
          </template>
          <a-card size="small" :bordered="false" class="box-card marginTop12">
            <template #title>
              <header class="titleHeader">
                <div class="titleLeft">
                  反馈列表
                  <ExclamationCircleOutlined />
                </div>
              </header>
            </template>
            <MyFeedback />
          </a-card>
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </div>
</template>

<script setup>
import {
  ExclamationCircleOutlined,
  UserOutlined,
  MailOutlined,
} from "@ant-design/icons-vue";
import { ref } from "vue";
import FeedbackLlist from "./feedbackLlist.vue";
import MyFeedback from "./myFeedback.vue";

const activeKey = ref("1");
const handleTabChange = (e) => {
  activeKey.value = e;
};
</script>

<style lang="less" scoped>
@import url("./index.less");
</style>
<style lang="less">
.user {
  color: #6e6e6e;
  .ant-tabs-ink-bar {
    background-color: #29834a;
  }
  .ant-tabs-nav .ant-tabs-tab-active {
    color: #4cc87e;
  }
}
</style>
